forum

home / developersection / forums / create group button dropdown with dropdown header

Ask Question

Create group button dropdown with dropdown header

Ethan Karla 401 28-Jul-2021

How to create group button dropdown with dropdown header?

bootstrap bootstrap 
Updated on 28-Jul-2021
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

03-Aug-2021

To make a Group Button Dropdown with Dropdown header in Bootstrap see the below example: 

<html lang='en'>

<head>

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>

       <title>Bootstrap Dropdown</title>

  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>

  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js'></script>

  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>

</head>

<body>

    <div class='container d-flex justify-content-center flex-column align-items-center'>

        <h2>Dropdown Header</h2>

        <p>Group Button Dropdown with Dropdown header</p>

        <div class='btn-group'>

            <button type='button' class='btn btn-outline-danger'>Ferrari</button>

            <button type='button' class='btn btn-outline-success'>Audi</button>

            <button type='button' class='btn btn-outline-primary'>Rolls Royce</button>

            <div class='btn-group'>

                <button type='button' class='btn btn-outline-info dropdown-toggle' data-toggle='dropdown'>

                    Mercedes

                </button>

                <div class='dropdown-menu'>

                    <a class='dropdown-item' href='#'>Mercedes-Benz C-Class</a>

                    <a class='dropdown-item' href='#'>Mercedes-Benz A-Class Limousine</a>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

Hope this will help you.

Happy Coding!

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy